Integration of navigational aids in the user interface

This paper describes how four independent navigational aids can be smoothly integrated in a unified graphical user interface. Our aim is to improve user performance in most web related tasks through integration of navigational aids. The navigational aids considered are (1) a short term history (the six last visited pages), (2) a personal “BestOf”, (the six most visited web pages), (3) an area of unclassified web pages stored to be read later and (4) an overview of an organized collection of bookmarks. K EYW OR D S: B ookma rks , His tory, V is ua liz a tion, U se r Inte rfa ce , W WW , N aviga tion, B row s ing. INTRODUCTION AND MOTIVATIONS Among all navigational aids that have emerged during the past years, some have been widely distributed and used such as bookmarks or history lists and others are very rarely available in current web browsers. It is the case of “BestOf” managers and “Defer Reading” handlers. BestOf managers log user navigation and provide direct access to most frequently visited pages. Defer Reading handlers act as “navigation post-it”: they are used to remind users with interesting pages gathered while browsing and to read later. These four navigational aids are usually used independently and web pages cannot easily be accessed or moved across the different tools. Our aim is to improve their use by integrating them in a unified user interface. This user interface also benefits from a model called “document as user interface” and can in turn serve as a user interface for navigation [1]. In this paper we describe how integration of the different navigational aids can be achieved by using advanced visualization and interaction techniques. INTEGRATING HISTORY, BOOKMARKS, BESTOF AND DEFER READING TOOLS We define a BookMap as graphical user interface that displays references to web pages (fig. 1). These references come from (1) user’s bookmarks (2) history list, (3) most visited web pages, (4) web pages stored to be read later. Within this user interface, web page references can be manipulated directly with a mouse for regular editing operations; or they can be manipulated indirectly through controllers: distortion controller (to implement zoom or fisheye transformations), transformation controller (to rotate, or translate items on the view) and filtering controllers (to filter out items that do not satisfy a given criteria). A s illustra ted by fig. 1, the ma in w indow is divide d into four a rea s to diffe re ntia te the four diffe re nt na vigational a ids me ntioned a bove . Controlle rs us e s e pa ra te windows (fig. 1). OVERVIEW OF BOOKMARKS AND DISTORTIONS. Bookmarks are organized in a hierarchy of categories and are displayed in the middle area (fig. 1). To examine the contents of the overview of bookmarks, two distortion techniques have been implemented: fisheye and zoom. Fisheye distortions [2] have been implemented to integrate details (around the focus) while keeping context (on the edges). Zooming allows the user to show more details simultaneously than when using a fisheye, at the expense of loosing context. Zoom and fisheye can be combined to efficiently browse the overview. Zoom can be set directly on the view by selecting the area for zooming or indirectly through the distortion controller (fig. 1). Two other complementary transformations have been implemented: rotations and translations. Users can translate or rotate the overview either by direct manipulation or by indirect manipulation. Indirect manipulation is achieved through the transformation controller (fig. 1). OVERLAPPING, RIFFLING AND SKIMMING Since many web page thumbnails can be displayed simultaneously in our views, they may overlap each other. Therefore, we developed two techniques to provide dynamic visualization of a set of thumbnail: skimming and rifling. Riffling paints the icon below the pointer on top. Therefore by moving the mouse over a set of icons, the user sees all of them very rapidly, like riffling the pages of a book. Skimming uses a separate window called the skimming window (fig. 1). Within an overview, a user can select pages, either directly with the mouse, or indirectly using filters (described in the next section). Selected pages are automatically displayed in the skimming window and can be controlled using VCR-like buttons (fig. 1): Play (start skimming), stop, go back, go forward. FILTERING To easily retrieve particular web pages from the overview, we have adapted and implemented dynamic filtering techniques [3]. Users can filter web pages based on the keywords they contain and on their dates. This is achieved by interacting with the filtering controller (fig. 1). Copyright .... EDITING AND INTEGRATION Users can copy, paste, move, create and delete any BookMap elements like they would do in any drawing editor. Drag and drop from one area through another is handled the same way as inside the same area (except that history or bestof areas cannot be the target of a drop). This results in a smooth integration of the four different navigational aids. Consequently, adding a web page in the bookmarks collection is simply handled by dragging the current web page from the history area to any category displayed in the bookmarks area. Conversely, double clicking on any web page thumbnail, makes the page to be rendered in a regular web browser. Communication between the browser and the BookMap system is achieved through a proxy and described in [1]. CONCLUSION AND FUTURE WORK Our proposal for integrating several navigational aids in the user interface accounts for browsing patterns [4] and makes navigation history, bookmarks and most frequently accessed sites directly manageable. BookMap is based on advanced visualization and interaction techniques. Our current and future work consists in (1) conducting more user-centered evaluations, (2) developing other consistent and complementary visualization and interaction techniques for BookMap and (3) extending BookMap to integrate more complex URL repositories. ACKNOWLEDGMENTS This project involved many graduate students that I would like to thank.